<template>
  <div>
    <div class="pageTitleWhole">
      <a-breadcrumb>
        <a-breadcrumb-item>工作台</a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <div class="gutter-example">
      <a-row :gutter="24">
        <a-col :span="16" class="gutter-row">
          <a-card title="各港口箱量" :bordered="false" class="work_title">
            <template slot="extra">
              <span
                style="cursor:pointer"
                :class="timeChosen === 1 ? 'timeChosen' : ''"
                @click="currentMonth"
              >本月</span>
              <span
                :class="timeChosen === 2 ? 'timeChosen' : ''"
                style="margin:0 10px;cursor:pointer"
                @click="currentYear"
              >全年</span>
              <a-range-picker style="width:220px" @change="timeChange" :value="value" />
              <!-- <a-button-group>
                <a-button type="link" ghost @click="currentMonth(0)">本月</a-button>
                <a-button type="link" ghost @click="currentYear(0)">全年</a-button>
              </a-button-group>-->
              <!-- <month-and-year @change="initDateSearch1" style="display:inline-block" /> -->
            </template>
            <div class="gutter-box">
              <a-row>
                <a-col :span="8">
                  <a-form :ref="form" layout="inline">
                    <a-form-item label="所属部门">
                      <a-tree-select
                        style="width:160px"
                        v-model="form.deptId"
                        :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                        :load-data="onLoadData"
                        :tree-data="deptTreeData"
                        placeholder="请选择"
                        @change="onChangeTree"
                      ></a-tree-select>
                    </a-form-item>
                    <a-form-item label="销售">
                      <a-select
                        v-model="form.sellerId"
                        class="selectInputWidth"
                        @change="roleChange"
                      >
                        <a-select-option v-for="v in sellers" :key="v.uiId">{{v.name}}</a-select-option>
                      </a-select>
                    </a-form-item>
                  </a-form>
                </a-col>
                <a-col :span="16">
                  <div class="echarts">
                    <div id="echarts1"></div>
                    <div class="echarts-label">
                      <div class="item-label" v-for="(v,k) in data1" :key="k">
                        <span class="idot" :style="{'background-color': color[k]}"></span>
                        <span class="name">{{v.name}}</span>
                        <span
                          class="percent"
                        >| {{ total1 === 0 ? 0 : (v.value*100 / total1).toFixed(0) }}%</span>
                        <span class="number">{{v.value}} 个</span>
                      </div>
                    </div>
                  </div>
                </a-col>
              </a-row>
            </div>
          </a-card>
          <a-card
            title="消息提醒"
            style="margin-top:24px;height:365px"
            :bordered="false"
            :class="msgList.length > 4 ? 'sale_news' : ''"
          >
            <a-list item-layout="horizontal" :data-source="msgList">
              <a-list-item slot="renderItem" slot-scope="item">
                <a-list-item-meta :description="item.sendDate">
                  <template v-if="item.type === 'REMINDERS'">
                    <span slot="title">
                      <b>催款提醒：</b>客户
                      <a @click="company(item)">{{item.custName}}</a>的账单已生成，账单编号
                      <a @click="order(item)">{{item.billCode}}</a>
                      请向客户催款！
                    </span>
                    <a-avatar slot="avatar" :src="msgIcon" />
                  </template>
                  <template v-else-if="item.type === 'EXPIRATION_CONTRACT'">
                    <span slot="title">
                      <b>合同到期提醒：</b>客户
                      <a @click="company(item)">{{item.custName}}</a>
                      的合同将在{{item.expirationDate}}到期，请尽快续签合同
                    </span>
                    <a-avatar slot="avatar" :src="hetIcon" />
                  </template>
                  <!-- ORDER_AUDIT -->
                  <template v-else-if="item.type === 'ORDER_AUDIT'">
                    <span slot="title">
                      <b>订单审核失败：</b>客户
                      <a @click="company(item)">{{item.custName}}</a>的订单审核失败，公司编号
                      <a @click="orderDetail(item)">{{item.billCode}}</a>
                      请修改后重新提交！
                    </span>
                    <a-avatar slot="avatar" :src="hetIcon" />
                  </template>
                </a-list-item-meta>
              </a-list-item>
            </a-list>
          </a-card>
        </a-col>
        <a-col :span="8" class="gutter-row work_tit">
          <a-tabs :default-active-key="tabKey" @change="tabChange" style="background:#fff">
            <a-tab-pane :key="1" tab="箱量排名" :bordered="false">
              <div class="tabTime">
                <month-and-year @change="initDateSearch1" style="margin-left:8%;margin-top:16px;" />
              </div>
              <div class="rankBody">
                <template v-if="rankData1.length > 0">
                  <p class="ranking" v-for="(v, i) in rankData1" :key="i">
                    <span class="numberStyle">
                      <img v-if="i < 3" :src="nosPic[i]" />
                      <template v-else>
                        <span>{{i+1}}</span>
                      </template>
                    </span>
                    <span class="numberAvtar">
                      <img :src="v.headPic || defaultAvatar" alt />
                    </span>
                    <span class="numberText">{{v.seller}}</span>
                    <span class="numberPer">
                      <span
                        :style="{'display': 'inline-block', height: '22px', 'background': 'rgb(58, 161, 255)', 'width': Math.floor(v.quantity / rankData1[0].quantity *100) + '%' }"
                      ></span>
                    </span>
                    <span class="numberDesc">{{v.quantity}} 个</span>
                  </p>
                </template>
                <a-empty style="margin-top:100px" v-else />
              </div>
            </a-tab-pane>
            <a-tab-pane :key="2" tab="完成率排名">
              <div class="tabTime">
                <month-and-year @change="initDateSearch2" style="margin-left:8%;margin-top:16px;" />
              </div>
              <div class="rankBody">
                <template v-if="rankData2.length > 0">
                  <p class="ranking" v-for="(v, i) in rankData2" :key="i">
                    <span class="numberStyle">
                      <img v-if="i < 3" :src="nosPic[i]" />
                      <template v-else>
                        <span>{{i+1}}</span>
                      </template>
                    </span>
                    <span class="numberAvtar">
                      <img :src="v.headPic || defaultAvatar" alt />
                    </span>
                    <span class="numberText">{{v.seller}}</span>
                    <span class="numberPer">
                      <span
                        :style="{'display': 'inline-block', height: '22px', 'background': 'rgb(58, 161, 255)', 'width': Math.floor(v.quantity / rankData2[0].quantity *100) + '%' }"
                      ></span>
                    </span>
                    <span class="numberDesc">{{v.quantity}} %</span>
                  </p>
                </template>
                <a-empty style="margin-top:100px" v-else />
              </div>
            </a-tab-pane>
          </a-tabs>
        </a-col>
      </a-row>
    </div>
    <a-modal
      title="账单"
      width="900px"
      centered
      :footer="null"
      :visible="visible"
      @cancel="modalCancel"
    >
      <a-descriptions class="zd_tanc">
        <a-descriptions-item label="对账单编号">{{billInfo.billCode || '--'}}</a-descriptions-item>
        <a-descriptions-item label="付款单位">
          <a-tooltip placement="top" style="cursor:pointer">
            <template slot="title">
              <span>{{billInfo.payableCustName || '--'}}</span>
            </template>
            {{billInfo.payableCustName || '--'}}
          </a-tooltip>
        </a-descriptions-item>
        <a-descriptions-item label="收款单位">
          <a-tooltip placement="top" style="cursor:pointer">
            <template slot="title">
              <span>{{billInfo.receivableCustName || '--'}}</span>
            </template>
            {{billInfo.receivableCustName || '--'}}
          </a-tooltip>
        </a-descriptions-item>
        <a-descriptions-item label="应付总金额">
          {{billInfo.currencyType === 'CNY' ? '¥' : '$'}}
          <span
            style="color:orange;font-size:20px"
          >{{billInfo.totalAmount || '--'}}</span>
        </a-descriptions-item>
        <a-descriptions-item label="收票总金额">
          {{billInfo.currencyType === 'CNY' ? '¥' : '$'}}
          <span
            style="color:orange;font-size:20px"
          >{{billInfo.invoiceAmount || '--'}}</span>
        </a-descriptions-item>
        <a-descriptions-item label="已付总金额">
          {{billInfo.currencyType === 'CNY' ? '¥' : '$'}}
          <span
            style="color:orange;font-size:20px"
          >{{billInfo.alreadyAmount || '--'}}</span>
        </a-descriptions-item>
        <a-descriptions-item label="未付总金额">
          {{billInfo.currencyType === 'CNY' ? '¥' : '$'}}
          <span
            style="color:orange;font-size:20px"
          >{{billInfo.remainingAmount || '--'}}</span>
        </a-descriptions-item>
        <a-descriptions-item label="对账日期">{{billInfo.createTime || '--'}}</a-descriptions-item>
        <a-descriptions-item label="收票日期">{{billInfo.lastInvoiceDate || '--'}}</a-descriptions-item>
        <a-descriptions-item label="截止日期">
          <span style="color:red">{{billInfo.endDate || '--'}}</span>
        </a-descriptions-item>
        <a-descriptions-item label="结束日期">{{billInfo.completeTime || '--'}}</a-descriptions-item>
        <a-descriptions-item label="对账人">{{billInfo.operatorName || '--'}}</a-descriptions-item>
        <a-descriptions-item label="状态">
          <span style="color:red">{{billInfo.status ? '未结清' : '已结清'}}</span>
        </a-descriptions-item>
      </a-descriptions>
      <div style="overflow:hidden">
        <a-button type="primary" style="float:right;" @click="billExport">导出账单</a-button>
      </div>
    </a-modal>
  </div>
</template>
<script>
import moment from 'moment'
import { querySellerDown, queryDeptDown } from '@/api'
import {
  getOrderContainerStatistics,
  querySalesMessageList,
  queryRankingList,
  queryBill
} from '@/api/salesCenter'
import no1 from '@/../static/images/no1.png'
import no2 from '@/../static/images/no2.png'
import no3 from '@/../static/images/no3.png'
import defaultAvatar from '@/../static/images/defaultAvatar.png'
import msgIcon from '@/../static/images/ck.png'
import hetIcon from '@/../static/images/het.png'
import MonthAndYear from '@/components/MonthAndYear'
import { commonExport } from '@/api/request'
const nosPic = [no1, no2, no3]
const deptData = {
  type: 1, // type 1判断权限 2不判断
  dataRole: 'CONTAINER_SELL'
}
const sellerData = {
  type: 1, // type 1判断权限 2不判断
  dataRole: 'CONTAINER_SELL',
  status: 1
}
const color = [
  '#3AA1FF',
  '#4ECB73',
  '#36CBCB',
  '#FBD437',
  '#F2637B',
  '#975FE4'
]
export default {
  components: {
    [MonthAndYear.name]: MonthAndYear
  },
  data () {
    return {
      defaultAvatar,
      nosPic,
      tabKey: 1,
      deptTreeData: [],
      sellers: [],
      form: {
        deptId: '',
        sellerId: ''
      },
      timeChosen: 1,
      portStartDate: '',
      portEndDate: '',
      value: [],
      value1: [],
      value2: [],
      color,
      data1: [],
      total1: 0,
      msgIcon,
      hetIcon,
      msgList: [],
      rankData1: [],
      rankData2: [],
      deptId: '',
      sellerId: '',
      startDate: '',
      endDate: '',
      billInfo: {},
      visible: false,
      isFirstEnd: true,
      rankStartTime1: '',
      rankEndTime1: '',
      rankStartTime2: '',
      rankEndTime2: '',
      billCode: '',
      exportBillId: ''
    }
  },
  methods: {
    orderDetail (e) {
      // this.$router.push({ path: `/salesCenter/salesOrder/detail/${e.billId}` })
      this.$router.push({ path: `/salesCenter/orderAuditDetail/${e.billId}` })
    },
    changeToText (e) {
      let text
      switch (e) {
        case 'domesticExportsQuantity':
          text = '内贸出口订单'
          break
        case 'domesticImportsQuantity':
          text = '内贸进口订单'
          break
        case 'foreignExportsQuantity':
          text = '外贸出口订单'
          break
        case 'foreignImportsQuantity':
          text = '外贸进口订单'
          break
        case 'unitedTransportExportsQuantity':
          text = '联运出口订单'
          break
        case 'unitedTransportImportsQuantity':
          text = '联运进口订单'
          break
      }
      return text
    },
    portContainerRequest (e) {
      getOrderContainerStatistics(e)
        .then(res => {
          // // console.log(res.data)
          this.isFirstEnd = false
          let data1 = []
          let total1 = 0
          let arrayKeys = Object.keys(res.data)
          let arrayVals = Object.values(res.data)
          for (let i = 0; i < arrayKeys.length; i++) {
            let newObj = {
              value: arrayVals[i],
              name: this.changeToText(arrayKeys[i])
            }
            newObj.key = arrayKeys[i]
            newObj.value = arrayVals[i]
            data1.push(newObj)
            total1 += arrayVals[i]
          }
          // console.log(data1)
          this.data1 = data1
          this.total1 = total1
          let echarts1 = this.$echarts.init(
            document.getElementById('echarts1')
          )
          this.drawLine(echarts1, '箱量', total1, data1)
        })
        .catch(rs => {})
    },
    messageListRequest (e) {
      querySalesMessageList(e)
        .then(res => {
          if (res.code === 0) {
            this.msgList = res.data
          }
        })
        .catch(rs => {})
    },
    rankListRequest (e) {
      this.rankData1 = []
      this.rankData2 = []
      queryRankingList(e)
        .then(res => {
          if (e.searchType === 1) {
            this.rankData1 = res.data
          } else {
            this.rankData2 = res.data
          }
        })
        .catch(rs => {})
    },
    billInfoRequest (e) {
      queryBill(e)
        .then(res => {
          // console.log(res.data)
          this.billInfo = res.data
          this.exportBillId = res.data.id
        })
        .catch(rs => {})
    },
    removeContainerInstance () {
      document.getElementById('echarts1').removeAttribute('_echarts_instance_')
    },
    drawLine (target, text, subtext, data, textPosition, fontColor) {
      // 绘制图表
      target.setOption({
        title: {
          text: text,
          textStyle: {
            color: fontColor ? '#D9001B' : '#666',
            fontWeight: 'normal',
            fontSize: 14
          },
          subtext: subtext === 0 ? '0' : subtext,
          subtextStyle: {
            color: fontColor ? '#D9001B' : '#666',
            fontWeight: 'bold',
            fontSize: textPosition ? 20 : 26
          },
          top: textPosition ? '39%' : '40%',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: function (data) {
            return (
              data.seriesName +
              '<br/>' +
              data.name +
              ' : ' +
              data.value +
              ' (' +
              data.percent.toFixed(0) +
              '%)'
            )
          }
        },
        legend: {
          selectedMode: 'true',
          top: 0,
          left: 10,
          orient: 'vertical',
          textStyle: {
            fontSize: 14,
            color: '#666'
          },
          show: false
        },
        series: [
          {
            name: '箱量',
            type: 'pie',
            radius: ['70%', '85%'],
            selectedMode: 'single',
            label: {
              show: false,
              position: 'center'
            },
            color: color,
            data: data
          }
        ]
      })
    },
    onLoadData (treeNode) {
      return new Promise(resolve => {
        if (treeNode.dataRef.children && treeNode.dataRef.children.length > 0) {
          resolve()
          return
        }
        queryDeptDown({ parentId: treeNode.dataRef.key, ...deptData }).then(
          rsp => {
            let childrenData = []
            rsp.data.forEach(value => {
              childrenData.push({
                title: value.name,
                key: value.deptId,
                value: value.deptId
              })
            })
            treeNode.dataRef.children = childrenData
            this.deptTreeData = [...this.deptTreeData]
            resolve()
          }
        )
      })
    },
    initDept (e) {
      // queryDeptDown(e).then(rsp => {
      //   let initData = []
      //   rsp.data.forEach((value, index) => {
      //     initData.push({
      //       title: value.name,
      //       key: value.deptId,
      //       value: value.deptId
      //     })
      //   })
      //   this.deptTreeData = initData
      //   this.form.deptId = rsp.data[0].deptId
      // })
      return new Promise(resolve => {
        queryDeptDown(e).then(rsp => {
          let initData = []
          rsp.data.forEach((value, index) => {
            initData.push({
              title: value.name,
              key: value.deptId,
              value: value.deptId
            })
          })
          this.deptTreeData = initData
          this.form.deptId = rsp.data[0].deptId
          if (this.isFirstEnd) {
            resolve(this.form.deptId)
          }
        })
      })
    },
    onChangeTree (value) {
      this.initSellerDown(value)
      this.form.deptId = value
      // this.deptId = value
      this.removeContainerInstance()
      this.portContainerRequest({
        startDate: this.portStartDate,
        endDate: this.portEndDate,
        deptId: value,
        sellerId: this.form.sellerId
      })
    },
    initSellerDown (deptId) {
      // return new Promise(resolve => {
      //   querySellerDown({ ...sellerData, deptId }).then(rsp => {
      //     this.sellers = rsp.data.map((v, i) => {
      //       if (!v.uiId) {
      //         v.name = '请选择'
      //         v.uiId = ''
      //       }
      //       return v
      //     })
      //     this.form.sellerId = rsp.data[0].uiId
      //     if (this.isFirstEnd) {
      //       resolve(this.form)
      //     }
      //   })
      // }).then(res => {
      //   let thisMonth = this.getMonthStartAndEnd(0)
      //   this.portContainerRequest({
      //     ...res,
      //     startDate: thisMonth[0],
      //     endDate: thisMonth[1]
      //   })
      // })
      return new Promise(resolve => {
        querySellerDown({ ...sellerData, deptId }).then(rsp => {
          this.sellers = rsp.data.map((v, i) => {
            if (!v.uiId) {
              v.name = '请选择'
              v.uiId = ''
            }
            return v
          })
          this.form.sellerId = rsp.data[0].uiId
          if (this.isFirstEnd) {
            resolve(this.form.sellerId)
            // // console.log(rsp.data[0].uiId)
          }
        })
      })
    },
    roleChange (e) {
      // this.sellerId = e
      this.form.sellerId = e
      this.removeContainerInstance()
      this.portContainerRequest({
        ...this.form,
        startDate: this.portStartDate,
        endDate: this.portEndDate
      })
    },
    getMonthStartAndEnd (AddMonthCount) {
      // 起止日期数组
      var startStop = []
      // 获取当前时间
      var currentDate = new Date()
      var month = currentDate.getMonth() + AddMonthCount
      if (month < 0) {
        var n = parseInt(-month / 12)
        month += n * 12
        currentDate.setFullYear(currentDate.getFullYear() - n)
      }
      currentDate = new Date(currentDate.setMonth(month))
      // 获得当前月份0-11
      var currentMonth = currentDate.getMonth()
      // 获得当前年份4位年
      var currentYear = currentDate.getFullYear()
      // 获得上一个月的第一天
      var currentMonthFirstDay = new Date(currentYear, currentMonth, 1)
      // 获得上一月的最后一天
      var currentMonthLastDay = new Date(currentYear, currentMonth + 1, 0)
      // 添加至数组
      startStop.push(this.getDateStr(currentMonthFirstDay))
      startStop.push(this.getDateStr(currentMonthLastDay))
      // 返回
      return startStop
    },
    getDateStr (date) {
      var year = ''
      var month = ''
      var day = ''
      var now = date
      year = '' + now.getFullYear()
      if (now.getMonth() + 1 < 10) {
        month = '0' + (now.getMonth() + 1)
      } else {
        month = '' + (now.getMonth() + 1)
      }
      if (now.getDate() < 10) {
        day = '0' + now.getDate()
      } else {
        day = '' + now.getDate()
      }
      return year + '-' + month + '-' + day
    },
    getFullYear () {
      let fullYear = []
      fullYear.push(`${new Date().getFullYear()}-01-31`)
      fullYear.push(`${new Date().getFullYear()}-12-31`)
      return fullYear
    },
    tabChange (key) {
      this.tabKey = key
      if (key === 1) {
        this.rankListRequest({
          searchType: this.tabKey,
          startDate: this.rankStartTime1,
          endDate: this.rankEndTime1
        })
      } else {
        this.rankListRequest({
          searchType: this.tabKey,
          startDate: this.rankStartTime2,
          endDate: this.rankEndTime2
        })
      }
    },
    company (e) {
      window.open(`/salesCenter/customManage/${e.custId}`, `_blank`)
    },
    currentMonth (e) {
      this.timeChosen = 1
      let thisMonth = this.getMonthStartAndEnd(0)
      this.value = [moment(thisMonth[0]), moment(thisMonth[1])]
      this.portStartDate = thisMonth[0]
      this.portEndDate = thisMonth[1]
      this.removeContainerInstance()
      this.portContainerRequest({
        deptId: this.deptId,
        sellerId: this.sellerId,
        startDate: thisMonth[0],
        endDate: thisMonth[1]
      })
      // if (e === 0) {
      //   this.value = [moment(thisMonth[0]), moment(thisMonth[1])]
      //   this.portStartDate = thisMonth[0]
      //   this.portEndDate = thisMonth[1]
      //   this.removeContainerInstance()
      //   this.portContainerRequest({
      //     deptId: this.deptId,
      //     sellerId: this.sellerId,
      //     startDate: thisMonth[0],
      //     endDate: thisMonth[1]
      //   })
      // } else {
      //   if (e === 1) {
      //     this.value1 = [moment(thisMonth[0]), moment(thisMonth[1])]
      //   } else if (e === 2) {
      //     this.value2 = [moment(thisMonth[0]), moment(thisMonth[1])]
      //   }
      //   setTimeout(() => {
      //     this.rankListRequest({
      //       searchType: this.tabKey,
      //       startDate: thisMonth[0],
      //       endDate: thisMonth[1]
      //     })
      //   }, 1)
      // }
    },
    currentYear (e) {
      this.timeChosen = 2
      let thisYear = this.getFullYear()
      this.value = [moment(thisYear[0]), moment(thisYear[1])]
      this.portStartDate = thisYear[0]
      this.portEndDate = thisYear[1]
      this.removeContainerInstance()
      this.portContainerRequest({
        deptId: this.deptId,
        sellerId: this.sellerId,
        startDate: thisYear[0],
        endDate: thisYear[1]
      })
      // if (e === 0) {
      //   this.value = [moment(thisYear[0]), moment(thisYear[1])]
      //   this.portStartDate = thisYear[0]
      //   this.portEndDate = thisYear[1]
      //   this.removeContainerInstance()
      //   this.portContainerRequest({
      //     deptId: this.deptId,
      //     sellerId: this.sellerId,
      //     startDate: thisYear[0],
      //     endDate: thisYear[1]
      //   })
      // } else {
      //   if (e === 1) {
      //     this.value1 = [moment(thisYear[0]), moment(thisYear[1])]
      //   } else if (e === 2) {
      //     this.value2 = [moment(thisYear[0]), moment(thisYear[1])]
      //   }
      //   setTimeout(() => {
      //     this.rankListRequest({
      //       searchType: this.tabKey,
      //       startDate: thisYear[0],
      //       endDate: thisYear[1]
      //     })
      //   }, 1)
      // }
    },
    timeChange (date, dateString) {
      this.value = date
      this.timeChosen = 0
      this.portStartDate = dateString[0]
      this.portEndDate = dateString[1]
      this.removeContainerInstance()
      this.portContainerRequest({
        deptId: this.deptId,
        sellerId: this.sellerId,
        startDate: dateString[0],
        endDate: dateString[1]
      })
    },
    timeChange1 (date, dateString) {
      this.value1 = date
      setTimeout(() => {
        this.rankListRequest({
          searchType: this.tabKey,
          startDate: dateString[0],
          endDate: dateString[1]
        })
      }, 1)
    },
    timeChange2 (date, dateString) {
      this.value2 = date
      setTimeout(() => {
        this.rankListRequest({
          searchType: this.tabKey,
          startDate: dateString[0],
          endDate: dateString[1]
        })
      }, 1)
    },
    order (e) {
      this.billInfoRequest({
        billCode: e.billCode
      })
      this.billCode = e.billCode
      this.visible = true
    },
    billExport () {
      // let columns = [
      //   {
      //     title: '对账单编号',
      //     dataIndex: 'billCode'
      //   },
      //   {
      //     title: '付款单位',
      //     dataIndex: 'payableCustName'
      //   },
      //   {
      //     title: '收款单位',
      //     dataIndex: 'receivableCustName'
      //   },
      //   {
      //     title: '应付总金额',
      //     dataIndex: 'totalAmount'
      //   },
      //   {
      //     title: '收票总金额',
      //     dataIndex: 'invoiceAmount'
      //   },
      //   {
      //     title: '已付总金额',
      //     dataIndex: 'alreadyAmount'
      //   },
      //   {
      //     title: '未付总金额',
      //     dataIndex: 'remainingAmount'
      //   },
      //   {
      //     title: '对账日期',
      //     dataIndex: 'createTime'
      //   },
      //   {
      //     title: '收票日期',
      //     dataIndex: 'lastInvoiceDate'
      //   },
      //   {
      //     title: '截止日期',
      //     dataIndex: 'endDate'
      //   },
      //   {
      //     title: '结束日期',
      //     dataIndex: 'completeTime'
      //   },
      //   {
      //     title: '对账人',
      //     dataIndex: 'operatorName'
      //   },
      //   {
      //     title: '状态',
      //     dataIndex: 'status',
      //     _needName: true
      //   }
      // ]
      // commonExport('/bill/exportBill', {
      //   billCode: this.billCode,
      //   columns: columns
      // })
      let billId = this.exportBillId
      let exportParam = {
        'feeType': 1,
        'billId': billId
      }
      commonExport('/bill/exportBillCostList', exportParam)
    },
    modalCancel () {
      this.visible = false
    },
    initDateSearch1 (startTime, endTime) {
      this.rankStartTime1 = startTime
      this.rankEndTime1 = endTime
      this.rankListRequest({
        searchType: this.tabKey,
        startDate: startTime,
        endDate: endTime
      })
      // if (startTime && endTime) {
      //   this.removethroughInstance()
      //   this.containerThroughRequest({
      //     startDate: startTime,
      //     endDate: endTime
      //   })
      // }
    },
    initDateSearch2 (startTime, endTime) {
      this.rankStartTime2 = startTime
      this.rankEndTime2 = endTime
      this.rankListRequest({
        searchType: this.tabKey,
        startDate: startTime,
        endDate: endTime
      })
    }
  },
  created () {
    // this.initDept(deptData) // 所属部门
    // this.initSellerDown() // 所属销售
    let thisMonth = this.getMonthStartAndEnd(0)
    Promise.all([this.initDept(deptData), this.initSellerDown()])
      .then(result => {
        this.portContainerRequest({
          deptId: result[0],
          sellerId: result[1],
          startDate: thisMonth[0],
          endDate: thisMonth[1]
        })
      })
      .catch(() => {
        // console.log(error)
      })
    this.messageListRequest({})
    this.portStartDate = thisMonth[0]
    this.portEndDate = thisMonth[1]
    this.value = [moment(thisMonth[0]), moment(thisMonth[1])]
    // this.rankListRequest({
    //   searchType: this.tabKey,
    //   startDate: thisMonth[0],
    //   endDate: thisMonth[1]
    // })
  }
}
</script>
<style scoped>
.gutter-example {
  margin: 24px;
}
.gutter-example >>> .ant-row > div {
  background: transparent;
  border: 0;
}
.gutter-box {
  background: #fff;
  padding: 5px 0;
}
.echarts {
  display: flex;
}
#echarts1 {
  width: 250px;
  height: 250px;
}
.echarts-label {
  flex: 1;
  padding: 20px 0;
  line-height: 35px;
}
.item-label {
  display: flex;
  align-items: center;
  justify-items: center;
  font-size: 14px;
}
.item-label .idot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 12px;
}
.item-label .name {
  color: #666;
  margin-right: 12px;
}
.item-label .percent {
  color: #ccc;
  margin-right: 12px;
}
.item-label .number {
  color: #666;
}
.tabTime {
  display: flex;
  /* padding-left: 24px; */
  align-items: center;
}
.ant-btn-background-ghost.ant-btn-link {
  color: #1890ff;
  color: #666;
}
.ant-btn-background-ghost.ant-btn-link:hover,
.ant-btn-background-ghost.ant-btn-link:focus {
  color: #40a9ff;
  background-color: transparent;
  border-color: transparent;
}
span.timeChosen {
  color: #1890ff;
}
</style>
<style lang="less" scoped>
.rankBody {
  margin: 10px 0px 20px 0px;
  padding: 0px 15px;
  // height: 320px;
  height: 620px;
  overflow: auto;
  .ranking {
    min-width: 380px;
    margin: 5px 0 12px 0;
    overflow: hidden;
    .numberStyle {
      display: block;
      float: left;
      width: 30px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      margin-right: 10px;
    }
    .numberAvtar {
      display: block;
      float: left;
      width: 30px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      margin-right: 10px;

      img {
        width: 28px;
        height: 28px;
        border: 1px solid #eee;
        border-radius: 50%;
      }
    }

    .numberText {
      display: block;
      float: left;
      width: 80px;
      height: 30px;
      line-height: 30px;
      overflow: hidden;
    }

    .numberPer {
      display: block;
      float: left;
      width: 45%;
      height: 22px;
      padding: 4px 0;
    }

    .numberDesc {
      display: block;
      float: left;
      text-indent: 5px;
      height: 30px;
      line-height: 30px;
    }
  }
}
</style>
<style lang="less" scoped>
.gutter-example {
  /deep/ .ant-tabs-bar {
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid #e8e8e8 !important;
  }
  /deep/ .ant-tabs-tab {
    padding: 17.5px 24px !important;
  }
}
</style>
